<template>
  <transition name="bounce" mode="out-in">
    <div class="mui-content mh-containe pd">
      <mh-header headName="会话设置"> </mh-header>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <span>消息置顶</span>
          <div class="mui-switch mui-switch-mini mui-active">
            <div class="mui-switch-handle"></div>
          </div>
        </li>
        <li class="mui-table-view-cell" @tap="massMsg">
          <a class="mui-navigate-right">群发</a>
        </li>
      </ul>

      <ul class="mui-table-view report">
        <li class="mui-table-view-cell" @tap="reportShow = true">举报此人</li>
      </ul>

      <div class="report-content" v-show="reportShow">
        <div class="report-cont-item">
          <h4>对方信息</h4>
          <form class="mui-input-group">
            <div class="mui-input-row">
              <label>真实姓名</label>
              <input type="text" class="mui-input-clear" placeholder="请输入真实姓名">
            </div>
            <div class="mui-input-row">
              <label>邮箱</label>
              <input type="text" class="mui-input-clear" placeholder="请输入邮箱">
            </div>
            <div class="mui-input-row">
              <label>联系方式</label>
              <input type="text" class="mui-input-clear" placeholder="请输入手机号">
            </div>
          </form>
        </div>
        <div class="report-cont-item">
          <h4>举报原因</h4>
          <p class="reason">诈骗钱财/酒托/饭托/茶托/色情动机/恶意中伤/广告 传销  </p>
          <h4>其它原因</h4>
          <div class="mui-input-row other-reason">
            <input type="text" class="mui-input-clear" placeholder="">
          </div>
        </div>
        <div class="report-cont-item">
          <h4>上传图片证明</h4>
          <div class="upload-box flex-bt">
            <div class="upload-item">
              <!--<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4147701082,622031175&fm=11&gp=0.jpg" alt="">-->
            </div>
          </div>
        </div>
        <div class="mui-row btn-row">
          <button type="button" class="mui-btn mh-btn">确定举报</button>
          <button type="button" class="mui-btn" @tap="reportShow = false">取消</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "msg-chat-setting",
    data () {
      return {
        reportShow: false
      }
    },
    created () {
      this.$nextTick(function() {
        mui('.mui-switch').switch();
        mui('.mui-input-row input').input();
      });
    },
    methods: {
      massMsg () {
        this.$router.push({
          path: '/messages/mass'
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .mui-content {
    height: 100%;
  }
  .mui-table-view-cell {
    padding: 1.2rem 1.5rem;
    font-size: 1.5rem;
  }
  .report {
    margin: 1rem 0;
    color: #f26c60;
  }
  .mui-input-row .mui-input-clear~.mui-icon-clear,
  .mui-input-row .mui-input-password~.mui-icon-eye,
  .mui-input-row .mui-input-speech~.mui-icon-speech {
    line-height: 38px;
  }
  .report-content {
    margin: 1rem;
    border-radius: .5rem;
  }
  .report-cont-item {
    border-top: 1px solid #eee;
    background-color: #fff;
    h4 {
      padding: 1rem;
      color: #999;
      font-size: 1.5rem;
    }
  }
  .mui-input-row label {padding: 0;}
  .reason {
    padding: 1rem;
    font-size: 1.4rem;
    color: #333;
  }
  .other-reason {
    padding: 1rem;
    input {
      height: 3rem;
      margin: 0;
      border: 1px solid #eee;
    }
  }
  .upload-box {
    padding: 1rem;
    flex-wrap: wrap;
  }
  .upload-item {
    position: relative;
    width: 9.8rem;
    height: 9.8rem;
    margin-bottom: .5rem;
    overflow: hidden;
    text-align: center;
    background-color: #eee;
    &:after {
      @include center;
      content: '+';
      font-size: 4rem;
      color: #999999;
    }
    img {
      width: 100%;
    }
  }
  .btn-row {
    display: flex;
    padding: 0 1rem;
    background-color: #fff;
    button {
      flex: 1;
      margin: .8rem;
      padding: 1rem 0;
    }
  }
</style>
